<template>
  <div>
    <v-dialog
        v-model="showDialogs"
        max-width="500px"
    >
      <v-card>
        <v-card-title>
          <span class="text-h5">更改电话</span>
        </v-card-title>
        <v-card-text>
          <v-container>
            <el-form :model="updatePhone" :rules="phoneRules" ref="updatePhoneRef">
              <el-form-item prop="phone" label="电话">
                <el-input v-model="updatePhone.phone" placeholder="请输入更改后的电话" ></el-input>
              </el-form-item>
            </el-form>
          </v-container>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>

          <v-btn
              color="blue darken-1"
              text
              @click="closeDialogs"
          >
            取消
          </v-btn>
          <v-btn
              color="blue darken-1"
              text
              @click="bindPhone"
          >
            提交
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <el-table
        :data="tableData.filter(data => !search || data.username.toLowerCase().includes(search.toLowerCase()) || data.course.toLowerCase().includes(search.toLowerCase()) || data.name.toLowerCase().includes(search.toLowerCase()) || data.className.toLowerCase().includes(search.toLowerCase()) || data.type.toLowerCase().includes(search.toLowerCase()) || data.phone.toLowerCase().includes(search.toLowerCase()))"
        style="width: 90%;margin:40px auto;">
      <el-table-column
          label="用户名"
          prop="username">
      </el-table-column>
      <el-table-column
          label="姓名"
          prop="name">
      </el-table-column>
      <!--班级组 -->
      <el-table-column
          label="班级"
          prop="className">
      </el-table-column>
      <!--Title课程名-->
      <el-table-column
          label="课程名"
          prop="course">
      </el-table-column>
      <!-- 课程类型 -->
      <el-table-column
          label="课程类型"
          prop="type">
      </el-table-column>
      <!--电话  -->
      <el-table-column
          label="电话"
          prop="phone">
      </el-table-column>
      <el-table-column >
        <template slot="header" slot-scope="scope">
          <el-input
              v-model="search"
              size="mini"
              placeholder="输入关键字搜索"/>
        </template>
        <template slot-scope="scope">

          <el-button size="mini"
                     @click="handleEdit(scope.row)">编辑</el-button>
          <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>


    </el-table>
  </div>

</template>

<script>
import {deleteStudent, selectAllStudents, updatePhone} from "../../network/Details/stuManage/stuManage";
import axios from "axios";
import store from "../../store";
import {bindStuCourse} from "../../network/Details/course/stuCourse";
export default {
  data() {
    return {
      showDialogs:false,
      username:'',
      updatePhone:{
        phone:''
      },
      phoneRules:{
        phone:[
          {required: true, message: '请输入电话', trigger: 'blur'},
        ]
      },
      tableData: [
      //     {
      //   username:"",
      //   name:"",
      //   className:"",
      //   course:"",
      //   type:"",
      //   phone:""
      // }
      ],
      search: ''
    }
  },
  created() {
    //执行后端请求并获取json数据
    selectAllStudents().then(res => {
      // this.tableData[0].username=res.data[0].username
      // this.tableData[0].fullName=res.data[0].name
      // this.tableData[0].classId=res.data[0].className
      // this.tableData[0].title=res.data[0].course
      // this.tableData[0].type=res.data[0].type
      // this.tableData[0].phone=res.data[0].phone
      //直接将后端的json数组复制给tableData，然后渲染到前端界面
      this.tableData=res.data
      console.log(this.tableData)
    })
  },
  methods: {
    bindPhone(){
      this.$refs.updatePhoneRef.validate((valid) =>{
        if(valid){
          updatePhone({
            //获取要修改的用户名
            username:this.username,
            //传入修改电话
            phone:this.updatePhone.phone
          }).then(res=>{
            console.log(res)
            if (res.code==200){
              //展示数据库中学生信息
              selectAllStudents().then(res => {
                this.tableData=res.data
                //关闭弹窗
                this.showDialogs = false;
              })
            }else{
              alert("修改失败")
            }
          })
        }
      })
      this.$nextTick(() => {
        this.$refs.updatePhoneRef.resetFields();
      });
    },
    closeDialogs(){
      this.showDialogs = false;
      this.$nextTick(() => {
        this.$refs.updatePhoneRef.resetFields();
      });
    },
    handleEdit(row) {
      this.username=row.username;
      this.showDialogs = true;
      // updatePhone({
      //   username:row.username,
      //   phone:row.phone
      // }).then(res=>{
      //   console.log(res)
      //   if (res.code==200){
      //     selectAllStudents().then(res => {
      //       this.tableData=res.data
      //       console.log(this.tableData)
      //     })
      //   }else{
      //     alert("修改失败")
      //   }
      // })

    },
    //点击delete按钮时，获取到这一行的数据集
    handleDelete(row) {
      deleteStudent({
        username:row.username,
        className:row.className
      }).then(res => {
        if(res.code==200){
          console.log(res.code)
          alert("删除成功！")
          selectAllStudents().then(res => {
            this.tableData=res.data
            console.log(this.tableData)
          })
        }else {
          alert("删除失败！！")
        }
      })

    }
  },
}
</script>

<style scoped>

</style>